<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- <div id="app"></div> -->

    <!-- <div id="counter">
      Counter: {{ counter }}
    </div>

    <script type="text/javascript">
      const Counter = {
        data() {
          return {
            counter: 0
          }
        },
        mounted() {
          setInterval(() => {
            this.counter++
          }, 1000)
        }
      }

      Vue.createApp(Counter).mount('#counter')
    </script> -->

    <!-- <div id="bind-attribute">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound
        title!
      </span>
    </div>
    <script type="text/javascript">
      const AttributeBinding = {
      data() {
        return {
          message: 'You loaded this page on ' + new Date().toLocaleString()
        }
      }
    }

    Vue.createApp(AttributeBinding).mount('#bind-attribute')  
    </script> -->

    <!-- <div id="event-handling">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
    <script type="text/javascript">
        const EventHandling = {
        data() {
          return {
            message: 'Hello Vue.js!'
          }
        },
        methods: {
          reverseMessage() {
            this.message = this.message
              .split('')
              .reverse()
              .join('')
          }
        }
      }

      Vue.createApp(EventHandling).mount('#event-handling')
    </script> --> 


    <!-- <div id="two-way-binding">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div> 

    <script type="text/javascript">
      const TwoWayBinding = {
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }

    Vue.createApp(TwoWayBinding).mount('#two-way-binding')
    </script> -->


    <!-- <div id="conditional-rendering">
      <span v-if="seen">Now you see me</span>
    </div> 

    <script type="text/javascript">
      const ConditionalRendering = {
      data() {
        return {
          seen: false
        }
      }
    }

    Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
    </script> -->

    <div id="list-rendering">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div> 
    <script type="text/javascript">
      const ListRendering = {
      data() {
        return {
          todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
          ]
        }
      }
    }

    Vue.createApp(ListRendering).mount('#list-rendering')
    </script>


    <!-- built files will be auto injected -->
  </body>
</html>
